<template>
  <v-app class="mian">
    <v-navigation-drawer app class="aside">
      <v-card height="100%" width="256" class="mx-auto">
        <v-navigation-drawer permanent>
          <v-img
           
            max-height="64"
            max-width="256"
            src="https://cdn.vuetifyjs.com/images/parallax/material2.jpg"
          ></v-img>
          <v-list nav dense class="company">
            <v-list-item-group v-model="selectedItem" color="primary">
              <v-list-item v-for="(item, i) in items" :key="i" :to='item.path'>
                <v-list-item-icon>
                  <v-icon v-text="item.icon"></v-icon>
                </v-list-item-icon>

                <v-list-item-content>
                  <v-list-item-title v-text="item.text"></v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </v-list-item-group>
          </v-list>
        </v-navigation-drawer>
      </v-card>
    </v-navigation-drawer>

    <v-app-bar app>
      <v-bottom-navigation
        v-model="value"
        :background-color="color"
        dark
        shift
        height="64"
      >
        <v-btn>
          <span>blue-grey</span>

          <v-icon>mdi-television-play</v-icon>
        </v-btn>

        <v-btn>
          <span>teal</span>

          <v-icon>mdi-music-note</v-icon>
        </v-btn>

        <v-btn>
          <span>brown</span>

          <v-icon>mdi-book</v-icon>
        </v-btn>

        <v-btn>
          <span>indigo</span>

          <v-icon>mdi-image</v-icon>
        </v-btn>
      </v-bottom-navigation>
    </v-app-bar>
    <v-main>
        <!-- 如果使用 vue-router -->
        <router-view></router-view>
      
    </v-main>
    <v-footer app dark padless >
      <v-card class="flex" flat tile height="40" >
        <v-card-title :class="color" >
          <strong class="subheading" 
            >Get connected with us on social networks!</strong
          >

          <v-spacer></v-spacer>
<!-- 
          <v-btn v-for="icon in icons" :key="icon" class="mx-4" dark icon>
            <v-icon size="24px">
              {{ icon }}
            </v-icon>
          </v-btn> -->
        </v-card-title>
      </v-card></v-footer
    >
  </v-app>
</template>
<style scoped>
.companty{
  text-align: center;
}
.v-card__subtitle,
.v-card__text,
.v-card__title {
  padding: 0px;
}
.mx-auto.v-card.v-sheet.theme--light {
  background-color: #f695950a;
}
.v-toolbar__content,
.v-toolbar__extension {
  padding: 0px !important;
}
.v-list.v-sheet.theme--light.v-list--dense.v-list--nav {
  padding: 0px;
  /* display: flex;
  justify-content: center; */
}
</style>
<script>
export default {
  data: () => ({
    // 
    cruds: [
      ["Create", "mdi-plus-outline", "create"],
      ["Read", "mdi-file-outline", "read"],
      ["Update", "mdi-update", "update"],
      ["Delete", "mdi-delete", "delete"],
    ],
    selectedItem: 0,
    items: [
      { text: "展示文章", icon: "mdi-folder",path:'/home/file'},
      { text: "展示图片", icon: "mdi-account-multiple",path:'/home/shared'},
      { text: "展示示例1", icon: "mdi-star",path:'/home/starred'},
      { text: "展示示例2", icon: "mdi-history",path:'/home/recent'},
      { text: "展示示例3", icon: "mdi-check-circle",path:'/home/offline'},
      { text: "展示示例4", icon: "mdi-upload",path:'/home/uploads'},
      { text: "展示示例5", icon: "mdi-cloud-upload",path:'/home/backups'},
    ],
    // icons: ["mdi-facebook", "mdi-twitter", "mdi-linkedin", "mdi-instagram"],
    value: 1,
  }),
  computed: {
    color() {
      switch (this.value) {
        case 0:
          return "blue-grey";
        case 1:
          return "teal";
        case 2:
          return "brown";
        case 3:
          return "indigo";
        default:
          return "blue-grey";
      }
    },
  },
};
</script>



